<template>
    <!-- 语言切换 -->
    <el-tooltip
        class="item"
        effect="dark"
        :content="$t('navBar.language')"
        placement="bottom"
    >
        <span class="icon-container">
            <el-dropdown
                trigger="click"
                @command="valueChange"
            >
                <span class="el-dropdown-link">
                    <i
                        class="fa fa-language"
                        aria-hidden="true"
                        @mouseover.self="changeBackground($event)"
                        @mouseout.self="reduction($event)"
                    />
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item
                            v-for="language in languages"
                            :key="language.locale"
                            :tabindex="language.value"
                            :command="language.value"
                            :style="[{'color': language.value === languageValue ? 'RGB(56,179,255)' : ''}]"
                            @click="handleClick(language.locale)"
                        >
                            {{ language.name }}
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </span>
    </el-tooltip>
</template>

<script>
export default {
    name: "Language",
    data() {
        return {
            languageValue: 0,
            languages: [
                { value: 0, name: '简体中文', locale: 'zh-CN' },
                { value: 1, name: '繁體中文', locale: 'zh-TW' },
                { value: 2, name: 'English', locale: 'en' },
                { value: 3, name: '日本語', locale: 'ja' },
            ]
        }
    },
    methods: {
        handleClick(locale) {
            this.$i18n.locale = locale;
        },
        // 还原背景色
        reduction(e) {
            e.target.parentNode.parentNode.style.backgroundColor = 'transparent';
        },
        // 改变背景色
        changeBackground(e) {
            e.target.parentNode.parentNode.style.backgroundColor = 'RGB(248,248,249)';
        },
        valueChange(val) {
            this.languageValue = val;
        }
    }
}
</script>

<style scoped>
    .icon-container {
        line-height: 55px;
    }
    .el-dropdown-link {
        line-height: 55px;
    }
    .fa {
        font-size: 23px;
        cursor: pointer;
        margin: 0 15px;
    }
</style>
